<template>
  <!--  @ok="handleSubmit"-->

  <BasicModal
    v-bind="$attrs"
    @register="register"
    showFooter
    :title="getTitle"
    width="60%"
    @ok="handleSubmit"
    @cancel="closeFn"
  >
    <!--    <Form  class="lqforder-h-group" :model="formState" ref="formRef">-->
    <!--      <FormItem label="费用名称" :required="true" name="mouldName"><Input v-model:value="formState.mouldName" placeholder="请输入费用名称" style="width: 237px;"></Input></FormItem>-->
    <!--    </Form>-->
    <!--    <div v-show="!checked" style="height: 600px">-->
    <!--      -->
    <!--    </div>-->
    <!--    <BasicTable @register="registerTable" >-->

    <!--    </BasicTable>-->

    <div style="overflow: hidden; width: 100%; height: 625px">
      <VxeBasicTable ref="tableRef" v-bind="gridOptions"> </VxeBasicTable>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, computed, unref, reactive } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicTable, useTable, TableAction, FormSchema } from '@/components/Table';
  import { vxeTableFormSchema } from '@/views/msManage/purchaseOrderList/role.data';

  import {
    BasicTableProps,
    VxeBasicTable,
    VxeGridInstance,
    VxeGridListeners,
    VxeGridPropTypes,
  } from '@/components/VxeTable';

  const props = defineProps({
    mode: { type: String, default: 'multiple' },
    isAdd: { type: Boolean, default: false },
  });
  import {
    materialTableListApi,
    purchaseOrderTableListApi,
    supplierTableListApi,
  } from '@/api/sys/msUser';
  import { Form, FormItem, Switch, Input } from 'ant-design-vue';

  import { useMessage } from '@/hooks/web/useMessage';

  const emit = defineEmits(['success', 'register']);
  const isUpdate = ref(true);
  const { createMessage } = useMessage();
  const formRef = ref();
  const checked = ref(false);
  const formState = ref({});

  const columns: VxeGridPropTypes.Columns = [
    { type: 'radio', width: 60, align: 'center' },
    {
      title: 'ms采购单号',
      field: 'orderNo',
      align: 'center',
      showOverflow: 'title',
      width: 150,
    },
    {
      title: '采购金额',
      field: 'orderPrice',
      align: 'center',
      width: 80,
    },
    // {
    //   title: '供应商编号',
    //   width: 100,
    //   dataIndex: 'supplierNo',
    // },
    {
      title: '供应商名称',
      field: 'supplierName',
      showOverflow: 'title',
      width: 170,
    },
    {
      title: '签单日期',
      field: 'orderDate',
      align: 'center',
      width: 110,
    },
    {
      title: '下单数量',
      field: 'orderNum',
      align: 'center',
      width: 80,
    },
    {
      title: '物料型号',
      width: 100,
      align: 'center',

      field: 'model',
    },
    {
      title: '物料名称',
      field: 'materialName',
      showOverflow: 'title',
      width: 100,
    },
    {
      title: '物料规格',
      field: 'specification',
      showOverflow: 'title',
      width: 170,
    },
    {
      title: '备注',
      field: 'remark',
      showOverflow: 'title',

      width: 120,
    },
    {
      title: '物料编号',
      field: 'materialNo',
      width: 100,

      //mp3Url remoteUrl
    },

    {
      title: '批号',
      field: 'no',
      showOverflow: 'title',
      width: 130,
    },
    {
      title: '下单人',
      field: 'userName',
      width: 100,
    },
  ];

  const tableRef = ref<VxeGridInstance>();

  const gridOptions = reactive<BasicTableProps>({
    id: 'VxeTable',
    keepSource: true,
    editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
    showOverflow: true,
    size: 'mini',
    height: 'auto',
    columns,
    toolbarConfig: {
      buttons: [
        // {
        //   content: '新增',
        //   buttonRender: {
        //     name: 'AButton',
        //     props: {
        //       type: 'primary',
        //       preIcon: 'mdi:page-next-outline',
        //     },
        //     events: {
        //       click: () => {
        //         // tableRef.value?.insert({ name: '新增的' });
        //         // createMessage.success('新增成功');
        //         handleCreate();
        //       },
        //     },
        //   },
        // },
      ],
      enabled: false, //禁用右侧打印等工具栏
    },
    radioConfig: {
      highlight: true,
    },
    formConfig: {
      enabled: true,
      items: vxeTableFormSchema,
    },
    rowConfig: {
      labelField: 'orderNo',
      trigger: 'row',
    },
    proxyConfig: {
      props: {
        result: 'data.list',
        list: 'data.list',
        total: 'data.totalResult',
        message: 'message',
      },
      ajax: {
        query: async ({ page, form }) => {
          return purchaseOrderTableListApi({
            page: page.currentPage,
            pageSize: page.pageSize,
            IfXuNiJian: 1,
            ...form,
          });
        },
        // queryAll: async ({ form }) => {
        //   return await demoListApi(form);
        // },
      },
    },
  });

  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //orderNo用于判断是否切换为输入框模式
    // if(data.orderNo){
    //   checked.value=false;
    // }else{
    //   if(data.isUpdate){
    //     checked.value=true;
    //     formState.value.mouldName=data.materialName
    //   }else{
    //     checked.value=false;
    //   }
    //
    // }
    //reload()
  });

  const getTitle = ref('选择采购单费用');

  async function handleSubmit() {
    let selectRows = tableRef.value.getRadioRecord();

    // if(!checked.value){
    // }else{
    //   formRef.value.validate()
    //     .then(() => {
    //       let value=formState.value.mouldName;
    //       if(!value){
    //         createMessage.error("请输入费用名称!");
    //         return false;
    //       }
    //       let result={type:"txt",value};
    //       emit('success',result);
    //       closeFn();
    //     })
    //     .catch(err => {
    //       console.log('error', err);
    //     });
    //
    // }
    if (!selectRows) {
      createMessage.error('请先勾选采购单费用!');
      return false;
    }
    emit('success', { type: 'arr', value: [selectRows] });
    closeFn();
  }
  function closeFn() {
    // tableRef.value.clearRadioRow();
    tableRef.value.commitProxy('reload');
    closeModal();
  }
</script>
<style lang="less">
  .lqforder-h-group {
    display: flex;
    padding-left: 6.5%;
    justify-items: center;
    margin-bottom: 18px;
    .g-lable {
      margin-right: 8px;
      align-items: center;
      display: flex;
    }
  }
</style>
